<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function changeImgs(){
            var elementById = document.getElementById("img");
            var elementsByTagName = document.getElementsByTagName("img");
            if(elementById.value=="查看多少只小猫，并切换成小狗"){
                elementById.value="查看多少只小狗，并切换成小猫"
                for (var i = 0; i < elementsByTagName.length; i++) {
                    elementsByTagName[i].src="./img/"+(i+4)+".png"
                }
            }
            else {
                elementById.value="查看多少只小猫，并切换成小狗"
                for (var i = 0; i < elementsByTagName.length; i++) {
                    elementsByTagName[i].src="./img/"+(i+1)+".png"
                }
            }
        }
    </script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100"><br>
<input type="button" onclick="changeImgs()" value="查看多少只小猫，并切换成小狗" id="img">
</body>
</html>